<template>
	<view class="container">
		<!-- 顶部个人信息区域 -->
		<view class="profile-header">
			<image class="bg-image" :src="datainfo.note_background_img" mode="aspectFill"></image>
			<view class="profile-info">
				<view class="profile-info-pic">
					<image class="avatar" :src="datainfo.headimg" mode="aspectFill"></image>
					<view class="profile-info-right">
						<view class="nickname">{{datainfo.nickname}}</view>
						<view class="location">IP属地：{{datainfo.city}}</view>
					</view>
				</view>
				<view class="description">
					{{ datainfo.description ? datainfo.description : '这个人很懒什么都没留下' }}
				</view>

				<!-- 统计数据 -->
				<view class="stats-item">
					<view class="stats">
						<view class="stat-item" @click="toMyfollow(2)">
							<text class="num">{{datainfo.follows}}</text>
							<text class="label">关注</text>
						</view>
						<view class="stat-item" @click="toMyfollow(3)">
							<text class="num">{{datainfo.fans}}</text>
							<text class="label">粉丝</text>
						</view>
						<view class="stat-item">
							<text class="num">{{datainfo.thumbs + datainfo.collects}}</text>
							<text class="label">获赞与收藏</text>
						</view>
					</view>
					<view class="edit-btn" v-if="showEditButton" @click="toSet">
						编辑资料
					</view>
				</view>
			</view>
		</view>

		<!-- 作品列表区域 -->
		<view class="works-container">
			<view class="tab-header">
				<view v-for="(tab, index) in all" :key="index" class="all-tab-item"
					:class="{ active: allTab === index }" v-if="showAllTabs || index === 0" @tap="Tab(index)">
					{{ tab }}
					<view :style="{ backgroundColor: t('color1') }" class="active-curve"></view>
				</view>
			</view>
			<view class="works-grid">
				<view class="work-item" v-for="(item, index) in worksList" :key="index" @click.stop="previewWork(item)">
					<image class="work-item-img" :src="item.pic" mode="aspectFill"></image>
					<view class="work-title">{{item.title}}</view>
					<view class="work-flex">
						<view class="work-stats">
							<image class="headimg-icon" :src="item.member_info.headimg" mode=""></image>
							<text class="like-count">{{item.member_info.nickname}} </text>
						</view>
						<!-- <view class="work-stats" @click.stop="addThumbs(item)">
							<image class="item-icon"
								:src=" static_url + '/static/comment_icon/like_icon2.png' "
								mode=""></image>
							<text class="like-count">{{item.thumbs}} </text>
						</view> -->
						<view class="work-stats" @click.stop="handleAction(item, 'thumb')" v-if="allTab == 0">
							<image class="item-icon" v-if="item.is_thumbs ==0"
								:src=" static_url + '/static/comment_icon/like_icon1.png'">
							</image>
							<image class="item-icon" v-if="item.is_thumbs ==1"
								:src=" static_url + '/static/comment_icon/like_icon2.png'">
							</image>
							<text class="like-count">{{ item.thumbs }}</text>
						</view>
						<view class="work-stats" @click.stop="handleAction(item, 'collect')" v-if="allTab == 1">
							<image class="item-icon" :src=" static_url + '/static/comment_icon/five_icon2.png'">
							</image>
							<text class="like-count">{{ item.thumbs }}</text>
						</view>

						<view class="work-stats" @click.stop="handleAction(item, 'thumb')" v-if="allTab == 2">
							<image class="item-icon" :src=" static_url + '/static/comment_icon/like_icon2.png' ">
							</image>
							<text class="like-count">{{ item.thumbs }}</text>
						</view>

					</view>
				</view>

			</view>
			<view class="load-more">
				<text v-if="loading">加载中...</text>
				<text v-else-if="noMore">没有更多了</text>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				allTab: 0,
				all: ['笔记', '收藏', '赞过'],
				isthumbs: false,
				datainfo: {},
				pre_url: app.globalData.pre_url,
				static_url: app.globalData.static_url,
				worksList: [],
				is_thumbs: 0,
				page: 1, // 当前页码
				limit: 10, // 每页条数
				loading: false, // 是否正在加载
				noMore: false, // 是否无更多数据
				opt: {}
			}
		},
		onLoad(opt) {
			this.opt = app.getopts(opt);
			this.getdata();
			this.getlist()
		},
		onPullDownRefresh() {
			this.getdata();
			this.products = [];
			this.page = 1;
			this.getlist(false, true);
		},
		onReachBottom() {
			this.getlist(true, false); // 加载下一页
		},
		computed: {
			showEditButton() {
				// 两种情况显示按钮：
				// 1. 没有opt.mid（查看自己的主页）
				// 2. opt.mid等于当前用户的mid（查看自己的主页）
				return !this.opt.mid || this.opt.mid == app.globalData.mid
			},
			// 判断是否显示全部选项卡
			showAllTabs() {
				return !this.opt.mid || this.opt.mid == app.globalData.mid;
			}
		},
		methods: {
			getdata() {
				const that = this;
				const params = that.opt.mid ? {
					mid: that.opt.mid
				} : {};

				app.get('MemberNote/myNote', params, (res) => {
					if (res.status === 200) {
						that.datainfo = res.data;
					} else {
						app.error(res.msg);

						that.datainfo = {};
					}
				});
			},
			getlist(isLoadMore = false, forceRefresh = false) {
				if ((this.loading || this.noMore) && !forceRefresh) return;
				this.loading = true;

				// 根据选项卡切换 type
				const typeMap = {
					0: 1,
					1: 2,
					2: 3
				}; // 笔记:1, 收藏:2, 赞过:3
				const type = typeMap[this.allTab];

				// 如果是加载更多，页码+1；否则重置为第1页
				const page = isLoadMore ? this.page + 1 : 1;
				let queryParams = `type=${type}&page=${page}&limit=${this.limit}`;
				// if(this.opt.mid == app.globalData.mid){
				// 	queryParams
				// }else{
				// 	queryParams += `&mid=${this.opt.mid}`;
				// }
				if (this.opt.mid) {
					queryParams += `&mid=${this.opt.mid}`;
				}
				app.get(`MemberNote/myNoteList?${queryParams}`, {}, (res) => {
					this.loaded();
					if (res.status == 200) {
						if (isLoadMore) {
							this.worksList = [...this.worksList, ...res.data];
							this.page = page;
						} else {
							this.worksList = res.data;
							this.page = 1;
						}
						// 判断是否还有更多数据
						this.noMore = res.data.length < this.limit;
					} else {
						app.error(res.msg);
					}
					this.loading = false;
				});
			},
			previewWork(work) {
				let type;
				if (this.allTab == 0) {
					uni.navigateTo({
						url: `/pagesEchart/find/works-detail?id=${work.id}&type=5`
					});
				}
				if (this.allTab == 1) {
					type = 3;
					uni.navigateTo({
						url: `/pagesEchart/find/works-detail?id=${work.id}&type=${type}`
					});
				}
				if (this.allTab == 2) {
					type = 4;
					uni.navigateTo({
						url: `/pagesEchart/find/works-detail?id=${work.id}&type=${type}`
					});
				}
			},
			toMyfollow(item) {
				if (this.showEditButton) {
					uni.navigateTo({
						url: '/pagesEchart/find/my_follow?type=' + item
					})
				} else {
					uni.showToast({
						title: '无法查看他人的关注/粉丝',
						icon: 'none'
					});
				}

			},
			// 统一处理点赞/收藏操作
			handleAction(item, actionType) {
				const apiMap = {
					'thumb': 'MemberNote/noteThumb', // 点赞/取消点赞
					'collect': 'MemberNote/noteCollect' // 收藏/取消收藏
				};
				app.post(apiMap[actionType], {
					member_note_id: item.id
				}, (res) => {

					if (res.status == 200) {
						// 操作成功，刷新当前列表
						this.getlist();
						// 可选：单独更新当前项的UI状态（避免重新请求整个列表）
						// this.updateItemStatus(item, actionType, res.data.is_active);
					} else {
						uni.showToast({
							title: res.msg || '操作失败',
							icon: 'none'
						});
					}
				});
			},
			Tab(index) {
				// 如果当前已经是选中状态，则不重复请求
				if (this.allTab === index && this.worksList.length > 0) return;
				this.allTab = index; // 更新选项卡索引
				this.page = 1; // 重置页码
				this.noMore = false; // 重置无更多数据标记
				this.worksList = []; // 清空旧数据（可选，增强用户体验）
				this.getlist(); // 重新加载数据

			},
			toSet() {
				uni.navigateTo({
					url: '/pagesExt/my/set?type=1'
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
	}

	.tab-header {
		display: flex;
		height: 90rpx;
		padding: 20rpx 0;

		gap: 20rpx;
		align-items: center;

		margin-bottom: 20rpx;
		width: 100vw;
		z-index: 9;
	}

	.all-tab-item {

		text-align: center;
		font-size: 38rpx;

		position: relative;
	}

	.all-tab-item.active {
		font-size: 38rpx;
		font-weight: bold;
		color: #000;

		position: relative;
	}

	.all-tab-item.active .active-curve {
		content: '';
		position: absolute;
		bottom: -12rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
	}


	.all-tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		/* background: #e64340; */
	}

	.profile-header {
		position: relative;
		width: 100%;
		height: 600rpx;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.profile-info {
		position: relative;
		padding: 30rpx;
		color: #fff;
		z-index: 1;
		height: 100%;
	}

	.profile-info-pic {
		display: flex;
		margin-bottom: 10rpx;
	}

	.profile-info-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 4rpx solid #fff;
		margin-right: 10rpx;
	}

	.nickname {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.location {
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	.description {
		font-size: 26rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;

	}

	.stats {
		display: flex;
		/* justify-content: space-around; */

		padding: 20rpx 0;

		gap: 100rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.num {
		font-size: 32rpx;
		font-weight: bold;
	}

	.label {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.works-container {
		padding: 20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #fff;
		margin-top: -20rpx;
		position: relative;
		z-index: 2;
	}

	.works-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.work-item {
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.work-item-img {
		width: 100%;
		height: 400rpx;
	}

	.work-title {
		font-size: 28rpx;
		color: #333;
		padding: 16rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		height: 100rpx;
	}

	.work-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.work-stats {
		padding: 10rpx 16rpx;

		display: flex;
		align-items: center;
	}

	.headimg-icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.like-count {
		font-size: 24rpx;
		color: #999;
	}

	.item-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.edit-btn {
		border: 1px solid rgba(255, 253, 248, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		border-radius: 36rpx;
		height: 50rpx;
		padding: 10rpx;
	}

	.stats-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 50rpx;
		width: 90%;
		left: 20rpx;

	}

	.load-more {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 24rpx;
	}
</style>